"use client"
import { cn } from "@/lib/utils"
import { Loader2,Image, MousePointerSquareDashed } from "lucide-react"
import { useState, useTransition } from "react"
import { Progress } from '@radix-ui/react-progress'

// 拖拽组件
import Dropzone, {FileRejection} from "react-dropzone"
import { useRouter } from "next/navigation"
import { useToast } from "@/components/ui/use-toast"

const Page = () => {
  // 拖拽状态
  const [isDragOver, setIsDragOver] = useState<boolean>(false)
  const [uploadProgress, setUploadProgress] = useState<number>(0)
  const [isUploading, setIsUploading] = useState<boolean>(false)
  const { toast }  = useToast()
  const router = useRouter()

 // 接收错误
  const onDropRejected = (rejectedFile: FileRejection[]) => {
    const [file] = rejectedFile
    setIsDragOver(false)

    // 判断文件格式
    toast({
      title: `${file.file.type} type is not supported`,
      description: '请上传PNG JPG JPEG',
      variant: 'destructive'
    })

  }
  // 接受
  const onDropAccepted = (acceptedFiles: File[]) => {
    
    console.log('accept',acceptedFiles);
    setIsDragOver(false)
    setIsUploading(true)
    if (acceptedFiles[0].name) {
      setIsUploading(false)
      router.push(`/configure/design?id=horse_phone`)
    }
    
    
  }
  
  const [isPending, startTransition] = useTransition();

  return (
    <div className={cn( "relative h-full flex-1 my16 w-full rounded-xl bg-gray-900/10 lg:rounded-2xl flex justify-center flex-col items-center", {
      'ring-blue-900/25 bg-blue-900/10': isDragOver
    } )}>
      <div className="relative flex flex-1 flex-col items-center justify-center w-full">
        <Dropzone 
          onDropRejected={onDropRejected}
          onDropAccepted={onDropAccepted}
          onDragEnter={() => setIsDragOver(true)}
          onDragLeave={() => setIsDragOver(false)}
          accept={{
            'image/png': ['.png'],
            'image/jpeg': ['.jpeg'],
            'image/jpg': ['.jpg'],
          }}
        >
          {
            ({ getRootProps, getInputProps}) => (
              <div 
                className="h-full w-full flex-1 flex flex-col items-center justify-center"
                {...getRootProps()}
              >
                <input {...getInputProps()} />
                {
                  isDragOver ? (<MousePointerSquareDashed  className="h-6 w-6 text-zinc-500 mb-2"/> )
                  : isUploading ? (<Loader2 className="animate-spin h-6 w-6 text-zinc-500 mb-2" /> )
                  : (<Image className="h-6 w-6 text-zinc-500 mb-2"/>)
                }
                <div className="flex flex-col justify-center mb-2 text-sm text-zinc-700">
                  {
                    isUploading ? (
                      <div>
                        <p> Uploading... </p>
                        <Progress 
                        value={uploadProgress}
                        className="mt-2 w-40 h-2 bg-gray-300" />
                      </div>
                    ) : isPending ? (
                      <div className="flex flex-col item-center">
                        <p> Redirect, please wait...</p>
                      </div>
                    ) : isDragOver ? (
                      <p>
                        <span className="font-semibold"> Drop file</span> to upload
                      </p>
                    ) : (
                      <p>
                        <span className="font-semibold"> 点击或者拖拽上传图片</span>
                      </p>
                    )
                  }
                </div>
                {
                  isPending ? null : <p className="text-sm text-zinc-500">PNG JPG JPEG</p>
                }
              </div>
            )
          }
        </Dropzone>
      </div>
    </div>
  )
}

export default Page